const webpack = require('webpack')
const path = require('node:path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const postcssPresetEnv = require('postcss-preset-env')
const {VueLoaderPlugin} = require('vue-loader')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {Configuration} = webpack
// const os = require('node:os')
// const cpus = os.cpus()

/**
 * @type Configuration
 */
const commonConfig = {
    entry: path.join(__dirname, 'src/main.ts'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name]-[chunkhash:8].js',
        clean: true
    },
    resolve: {
        alias: {
            '@': path.join(__dirname, 'src'),
            '@styles': path.join(__dirname, 'src/styles'),
            '@views': path.join(__dirname, 'src/views')
        },
        extensions: ['.js', '.ts', '.vue']
    },
    // 二次构建缓存 
    // dev ：业务代码无变动 24664 ms =》 1121 ms 20~50倍    
    // prod: 业务代码无变动 37554 ms => 1074 ms 约30倍  有变动17934ms 约2~3倍(配合分包)
    cache: {
        type: 'filesystem',
        cacheDirectory: path.resolve(__dirname, '.temp_cache'),
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                // 使用include exclude缩小范围 42474 ms 24434 ms 1.7~2倍
                include: path.resolve(__dirname, 'src'),
                // exclude: /node_modules/,
                use: [
                    {
                        loader: 'ts-loader',
                        options: {
                            appendTsSuffixTo: [/\.vue$/],
                            // 此选项会关闭类型检查,以缩短使用 ts-loader 时的构建时间 23337 ms => 5464 ms 提升4倍速度
                            transpileOnly: true
                        }
                    }
                ],
                
            },
            { 
                test: /\.js$/,
                include: path.resolve(__dirname, 'src'),
                // exclude: /node_modules/,
                use: [
                    // 42669 ms =>  28357 ms 2倍不到 收益不是很大
                    // 'thread-loader',
                    'babel-loader'
                ]
            },
            // https://vue-loader.vuejs.org/zh/guide/#vue-cli
            {
                test: /\.vue$/,
                include: path.resolve(__dirname, 'src'),
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                // include: path.resolve(__dirname, 'src'),
                use: [
                    MiniCssExtractPlugin.loader,
                    // MiniCssExtractPlugin与style-loader冲突
                    // 'vue-style-loader',
                    {
                        loader: 'css-loader',
                        options: { importLoaders: 1 },
                    },
                    // css兼容问题
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    postcssPresetEnv(/* pluginOptions */),
                                    [   
                                        "postcss-preset-env",
                                        {},
                                    ]
                                ]
                            }
                        }
                    }
                ]
            },
            {
                test: /\.s[a|c]ss$/i,
                // include: path.resolve(__dirname, 'src')
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        // css-loader处理前 允许几个loader处理@import语句
                        options: { importLoaders: 1 },
                    },
                    // css兼容问题
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    //postcssPresetEnv内置了autofixer，且需要依赖package.json的browserslist
                                    postcssPresetEnv(/* pluginOptions */),
                                ]
                            }
                        }
                    },
                    // sass-loader 搭配sass https://www.npmjs.com/package/sass-loader#additionaldata
                    {
                        loader: 'sass-loader',
                        options: {
                            // 设置全局变量
                            additionalData: '@import "~@styles/var.scss";'
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        // new DllReferencePlugin({
        //     context: __dirname,
        //     manifest: require('./dll/vue.manifest.json')
        // }),
        // 全局导入模块，不用import或require
        new webpack.ProvidePlugin({
            Utils: path.resolve(__dirname, 'src/utils/index.ts'),
        }),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, 'public/index.html'),
            title: 'webpack模版项目'
        }),
        // 配合vue-loader
        new VueLoaderPlugin()
    ],
    optimization: {
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                vendors: {
                    name: 'vendors',
                    // chunks: 'initial',
                    minSize: 0,
                    test: /node_modules/,
                    priority: 2
                },
                // lodash: {
                //     test: /node_modules\/lodash/,
                //     priority: 5,
                //     name: 'vendorLodash',
                //     minSize: 0,
                //     enforce: true
                //     // chunks: 'async'
                // },
                commons: {
                    name: 'commons',
                    // chunks: 'initial',
                    minChunks: 2,
                    priority: 1
                }
            }
        }
    }
}

module.exports = commonConfig